<template lang="pug">
modal(
  :show.sync="show",
  :approve="approve",
  :deny="deny",
  :header="header",
  :content="true",
)
  div(slot="content")
    user-search(
      v-if="!user_id",
      :user.sync="user",
    )
    br
    obj-single-select(
      v-if="type==='order'",
      placeholder="类型",
      :options="helper.orderCategoryArray",
      key="value",
      label="text",
      :value.sync="order.category",
      type="value",
    )
    obj-single-select(
      v-if="type==='report'",
      placeholder="类型",
      :options="helper.reportCategoryArray",
      key="value",
      label="text",
      :value.sync="report.category",
      type="value",
    )
    template(v-if="type === 'coupon'")
      coupon-select(
        :coupon.sync="coupon.template",
      )
      br
      .ui.form
        .two.fields
          .field
            date-picker(
              :unix.sync="coupon.valid_after",
              placeholder="开始时间",
            )
          .field
            date-picker(
              :unix.sync="coupon.valid_before",
              placeholder="结束时间",
            )
        .field
          .flex.jsb.ac
            input(v-model="coupon.related_expire", type="number", placeholder="相对有效期")
            label &nbsp;秒
          p(v-if="helper.isAmountValid(coupon.related_expire)") 约为&nbsp;{{coupon.related_expire | durationSeconds}}
        .field
          input(placeholder="名称", v-model="coupon.name")
        .field
          input(placeholder="描述", v-model="coupon.description")
        .field
          input(placeholder="金额", v-model="coupon.price")
</template>

<script>
import { toUserCoupon, createReport, createCoupon, createOrder, updateOrder, getOrder } from '../../vuex/action'
import Modal from '../semantic/modal'
import UserSearch from '../search/user'
import ObjSingleSelect from '../select/objSingle'
import DatePicker from '../date'
import CouponSelect from '../select/coupon'

export default {
  name: 'createModal',
  props: ['header', 'show', 'type', 'user_id'],
  components: {
    Modal,
    UserSearch,
    ObjSingleSelect,
    DatePicker,
    CouponSelect,
  },
  vuex: {
    getters: {
      orderSource: ({ order }) => order.order,
    },
    actions: {
      createReport,
      createOrder,
      updateOrder,
      getOrder,
      createCoupon,
      toUserCoupon,
    }
  },
  data() {
    return {
      user: null,
      order: {
        category: 'buy',
      },
      report: {
        category: 'pq',
      },
      coupon: {
        template: {
          id: null,
        },
        coupon_template_id: null,
        name: null,
        description: null,
        price: null,
        valid_before: null,
        valid_after: null,
        related_expire: null,
      },
    }
  },
  methods: {
    approve() {
      if (this.type === 'order') {
        catchError(async() => {
          const { id } = await this.createOrder({
            category: this.order.category,
          })
          await this.getOrder(id)
          await this.updateOrder(_.assign(
            _.cloneDeep(this.orderSource), {
              customer: {
                id: this.user_id || this.user.id,
              },
            }
          ))
          router.go({ name: 'order', params: { id }, query: { mode: 'edit' } })
        }, '创建成功')
      } else if (this.type === 'coupon') {
        catchError(async() => {
          await this.toUserCoupon({
            user_id: this.user_id || this.user.id,
            coupon_template_id: this.coupon.template.id,
            name: this.coupon.name,
            description: this.coupon.description,
            price: this.coupon.price,
            valid_before: this.coupon.valid_before,
            valid_after: this.coupon.valid_after,
            related_expire: this.coupon.related_expire,
          })
        }, '创建成功')
      } else {
        catchError(async() => {
          await this.createReport({
            user_id: this.user_id || this.user.id,
            category: this.report.category,
          })
        }, '创建成功')
      }
    },
    deny() {

    },
  },
  computed: {
    header() {
      const headers = {
        report: '新建验光报告',
        order: '新建订单',
        coupon: '新建优惠券',
      }
      return headers[this.type]
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
